<template>
  <div>
    <!-- 组件传值
      获取组件实例：
          ref:组件层面 ，可通过ref获取组件实例对象
               父获取子实例用ref:this.$refs.ref的值
          $parent:子获取父实例(它是找自己最近的父级)
          $children:找出自己全部子组件实例
          $root:找出根组件实例
      父子组件传值
         props与emit
         v-model与.sync
      兄弟组件传值:可用于任意组件间的传值
         EventBus
         1:Vue.prototype.$bus=new Vue()
         2:监听：this.$bus.$on('事件名',(参数)=>{...})
         3:触发: this.$bus.$emit('事件名',实参)
         4:销毁：this.$bus.$off('事件名')
      特性继承
         $attrs与$listeners
          $attrs:接收父传子的非props属性（子组件没有使用props接收）  v-bind=$attrs
          $listeners:接收父在子组件标签上绑定的所有事件    v-on=$listeners
      高阶组件向低阶组件传值(建议在公共组件封装中使用，不建议大量在业务逻辑中使用)
          provide:传
             provide(){
              return {
                 属性名:值
              }
             }
          inject：收
            inject:['属性名']
            123
    -->
    <h2>{{ msg }}</h2>
    <button @click="toApp">向高阶组件传值</button>
  </div>
</template>
<script>
export default {
  components: {},
  inject: ['msg', 'fn'],
  data() {
    return {}
  },
  mounted() {
    console.log(this.msg)
  },
  methods: {
    toApp() {
      this.fn(Date.now())
    }
  }
}
</script>
<style></style>
